<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <el-button class='add-button' type="primary" @click='addDialog = true' >添加角色</el-button>
      </el-row>
      <el-table :data="TableData" style="width: 100%" border>
        <el-table-column type='expand'>
          <template #default='scope'>
            <el-row class='row' v-for='i in scope.row.children' :key='i.id'>
              <el-col :span='5'>
                <el-tag closable @close="deleteRole(scope.row, i.id)">{{ i.authName }}</el-tag>
                <i class='el-icon-caret-right'></i>
              </el-col>
              <el-col :span='19'>
                <el-row class='second-row' v-for='j in i.children' :key='j.id'>
                  <el-col :span='6'>
                    <el-tag type='success' closable @close="deleteRole(scope.row, j.id)">{{ j.authName }}</el-tag>
                    <i class='el-icon-caret-right'></i>
                  </el-col>
                  <el-col :span='18'>
                    <el-tag @close="deleteRole(scope.row, k.id)" type='warning' class='tag-item' closable v-for='k in j.children' :key='k.id'>{{ k.authName }}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label='#' type='index' width='40'></el-table-column>
        <el-table-column label='角色名称' prop='roleName'></el-table-column>
        <el-table-column label='角色描述' prop='roleDesc'></el-table-column>
        <el-table-column label='操作' width='290'>
          <template #default='scope'>
            <el-button type="primary" size='mini' icon="el-icon-edit" @click='showEditDialog(scope.row)'>编辑</el-button>
            <el-button type="danger" size='mini' icon="el-icon-delete" @click='deleteRoles(scope.row.id)'>删除</el-button>
            <el-button type="warning" size='mini' icon="el-icon-setting" @click='showTreeDialog(scope.row)' >分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="分配权限"
      :visible.sync="treeDialog"
      width="50%">
      <el-tree ref='tree_ref' :data='treeData' show-checkbox :props='defaultProps' default-expand-all node-key="id" :default-checked-keys='defaultKey' ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeDialog = false">取 消</el-button>
        <el-button type="primary" @click="changeRoles">修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加角色"
      :visible.sync="addDialog"
      width="50%"
      @close='addDialogClose'>
      <el-form :model="addForm" :rules="addForm_rules" ref="addForm_ref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">添 加</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑角色"
      :visible.sync="editDialog"
      width="50%"
      @close='editDialogClose'>
      <el-form :model="editForm" :rules="editForm_rules" ref="editForm_ref" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="editForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editRoles">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      TableData:[],
      treeDialog: false,
      addDialog: false,
      treeData:[],
      defaultProps:{
        children:'children',
        label:'authName'
      },
      defaultKey:[],
      selectItem:null,
      addForm: {
        roleName:'',
        roleDesc:''
      },
      addForm_rules:{
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
      },
      editForm:{
        roleName:'',
        roleDesc:''
      },
      editDialog:false,
      editForm_rules:{
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    async getData() {
      let res = await this.axios.get('roles')
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.TableData = res.data
    },
    async deleteRole(row, id) {
      let rel = await this.confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if( rel !== 'confirm' ) return this.pop('取消权限删除')
      let res = await this.axios.delete(`roles/${ row.id }/rights/${ id }`)
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      row.children = res.data
    },
    async changeRoles() {
      let tree = this.$refs.tree_ref
      let data = [...tree.getCheckedKeys(),...tree.getHalfCheckedKeys()]
      let res = await this.axios.post(`roles/${ this.selectItem.id }/rights`, { rids:data.join(',') })
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.treeDialog = false
      this.getData()
    },
    async showTreeDialog( row ) {
      this.defaultKey = []
      this.getDefaultKeys(row)
      this.selectItem = row
      let res = await this.axios.get(`rights/tree`)
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.treeData = res.data
      this.treeDialog = true
    },
    getDefaultKeys( row ) {
      row.children.forEach( item => {
        if( item.children ) {
          this.getDefaultKeys( item )
        } else {
          this.defaultKey.push(item.id)
        }
      })
    },
    async addRoles() {
      let rel = await this.$refs.addForm_ref.validate().catch( err=>err )
      if( !rel ) return this.pop.error('请正确填写')
      let res = await this.axios.post('roles', this.addForm)
      if( res.meta.status !== 201 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
      this.addDialog = false
    },
    addDialogClose() {
      this.$refs.addForm_ref.resetFields()
    },
    async deleteRoles( id ) {
      let rel  = await this.confirm('永久删除该角色', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch( err=>err )
      if( rel !== 'confirm' ) return;
      let res = await this.axios.delete(`roles/${ id }`)
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
    },
    showEditDialog( row ) {
      this.editForm = {...row}
      this.editDialog = true
    },
    async editRoles() {
      let rel = await this.$refs.editForm_ref.validate().catch( err=>err )
      if( !rel ) return this.pop.error('请正确填写')
      let res = await this.axios.put(`roles/${ this.editForm.id }`, this.editForm )
      if( res.meta.status !== 200 ) return this.pop.error( res.meta.msg )
      this.pop.success( res.meta.msg )
      this.getData()
      this.editDialog = false
    },
    editDialogClose() {
      this.editForm = {}
      this.$refs.editForm_ref.resetFields()
    }
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top:1px solid rgba(0, 0, 0, 0.11);
}
.row:last-of-type {
  border-bottom:1px solid rgba(0, 0, 0, 0.11);
}
.second-row {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom:1px solid rgba(0, 0, 0, 0.11);
}
.second-row:last-of-type {
  border-bottom:none
}
.tag-item {
  margin:10px 15px 10px 0;
}
</style>